<template>
	<view v-show="isShowTopBg"
		style="width: 100%; height: 100%; background-color: #FF3D12; position: fixed; z-index: -1;"></view>
	<view class="flex-column center-row" style="background-color: #F8F8F8;">
		<image class="headimage" mode="aspectFit" src="https://mcdn.chatgk.com/xcx/static/images/zhuanjia/zj-top-bg.png">
		</image>
		<image style="width: 580rpx; height: 160rpx; margin: -80rpx 0 0 12%;"
			src="https://mcdn.chatgk.com/xcx/static/images/zhuanjia/zj-top-title.png" mode="aspectFit"></image>

		<view class="contentview" v-for="(items, index) in batchDatalist">
			<image class="zhuanheaderimage" :src="imageArr[index]" mode="aspectFill"></image>

			<view class="flex-column zhuannametitle">
				<text class="">{{items.name}}</text>

				<view class="tag-bgview">
					<view class="tag-view flex-row center-row smallLable" style="background-color: #FFCECE;"
						v-show="items.hot==1">
						<image style="width: 20rpx; height: 20rpx; margin-right: 2rpx;"
							src="https://mcdn.chatgk.com/xcx/static/images/zhuanjia/zj-hot.png" mode="aspectFit">
						</image>
						<text class="text-tag" style="color: #FF3D5D;">热门</text>
					</view>
					<view class="tag-view flex-row center-row smallLable" style="background-color: #DAECFF;"
						v-show="items.recommend==1">
						<image style="width: 20rpx; height: 20rpx; margin-right: 2rpx;"
							src="https://mcdn.chatgk.com/xcx/static/images/zhuanjia/zj-praise.png" mode="aspectFit">
						</image>
						<text class="text-tag" style="color: #0077FE;">推荐</text>
					</view>
				</view>

				<view class="tag-bgview">
					<view class="tag-view flex-row center-row smallLable" style="background-color: #EAEAEA;"
						v-for="(tagItem) in JSON.parse(batchDatalist[index].specialty)">
						<text class="text-tag" style="color: #C9C9C9;">{{tagItem}}</text>
					</view>
				</view>

				<text class="zhuanintroduceitle">
					<!-- {{items.introduce}} -->
					{{items.intro}}
				</text>

				<view class="view-bottom flex-row center-row space-between">
					<view class="flex-column center-row dataDown">
						<text class="text-bottom num">{{items.service_num}}</text>
						<text class="text-bottom title">服务人数</text>
					</view>

					<view class="view-line-v dataDown"></view>

					<view class="flex-column center-row dataDown">
						<text class="text-bottom num">{{items.evaluate_rate}}</text>
						<text class="text-bottom title">好评率</text>
					</view>
				</view>
				<view v-if="items.isReserve == false" class="nowcallbutton" @tap="clickButton(items)">
					立即预约
				</view>
				<view v-else class="nowcallbutton nowcalled">
					已预约
				</view>
			</view>
		</view>

		<image style="width: 726rpx; height: 1384rpx; margin-top: 22rpx;"
			src="https://mcdn.chatgk.com/xcx/static/images/zhuanjia/zj-bg-1.png" mode="aspectFit"></image>
		<image style="width: 686rpx; height: 1150rpx; margin: 32rpx 0;"
			src="https://mcdn.chatgk.com/xcx/static/images/zhuanjia/zj-bg-2.png" mode="aspectFit"></image>

		<view class="flex-column center-row"
			style="margin: 0 32rpx; background-color: #fff; border-radius: 20rpx; padding: 40rpx 32rpx; margin-bottom: 32rpx;">
			<view class="flex-row center-row">
				<image style="width: 36rpx; height: 26rpx;"
					src="https://mcdn.chatgk.com/xcx/static/images/zhuanjia/zj-line.png" mode="aspectFit">
				</image>
				<text style="font-size: 36rpx; font-weight: bold; color: #333333; margin: 0 16rpx;">温馨提示</text>
				<image style="width: 36rpx; height: 26rpx;"
					src="https://mcdn.chatgk.com/xcx/static/images/zhuanjia/zj-line.png" mode="aspectFit">
				</image>
			</view>

			<view class="" style="font-size: 26rpx; color: #333333; margin-top: 16rpx;">
				购买一对一填报指导服务的考生需要预留充足的时间，以确保能够得到专家良好的服务。建议考生在购买服务前了解相关规定和服务内容，并提供真实准确的个人信息。同时，需要认真选择院校专业并按照规定的时间节点完成填报志愿。<text
					style="color: #FF3B0A;">购买时间和填报志愿截止时间须预留48小时以上，</text>希望所有考生能够顺利完成志愿填报，实现自己的教育梦想。
			</view>
		</view>
		<loading v-show="loadshow"></loading>
	</view>
</template>

<script>
	import userManager from '@/common/manager/user-manager.js'
	import shareText from '@/common/manager/sharText.js'
	export default {
		data() {
			return {
				loadshow: false,
				batchDatalist: [],
				imageArr: [],
				isFload: true,
				isShowTopBg: false,
				userInfo: getApp().globalData.userInfo
			}
		},
		// 分享
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			return shareText
		},
		onLoad() {
			setTimeout(() => {
				this.isShowTopBg = true
			}, 1000)
		},
		onShow() {
			if (this.imageArr.length == 0) {
				this.getAskZhuanJiaList()
			}
		},
		onPageScroll: function(e) {
			if (e.scrollTop <= 300) {
				this.isShowTopBg = true
			} else {
				this.isShowTopBg = false
			}
		},
		methods: {
			fload() {
				this.isFload = !this.isFload;
			},
			clickButton(e) {
				if (userManager.isLogin()) {
					const data = {
						// 来源
						'source': '小程序',
						'experNumId': e.id,
						'expertName': e.name,
						'studentName': getApp().globalData.userInfo.nick,
						'studentMobile': getApp().globalData.userInfo.phone
					};
					this.loadshow = true
					this.$request.reserveExperts(data).then(res => {
						if (res.code === 20000) {
							this.loadshow = false
							uni.showToast({
								title: "预约成功",
								icon: 'success'
							})
							this.getAskZhuanJiaList()
						} else {
							uni.showToast({
								title: "预约失败",
								icon: 'error'
							})
							this.loadshow = false
						}
					}).catch(_ => {
						this.loadshow = false
					})
				}

			},
			getAskZhuanJiaList() {
				// uni.showLoading({
				// 	mask: true
				// })
				this.loadshow = true
				var userInfo = getApp().globalData.userInfo;
				var data = {}
				if (userInfo) {
					data.studentMobile = userInfo.phone
				} else {
					data.studentMobile = ''
				}

				this.$request.expertsTeamList(data).then(res => {
						if (res.code == 20000) {
							// this.$request.askExperts(data).then(res => {
							this.loadshow = false
							this.batchDatalist = res.data
							for (var i = 0; i < this.batchDatalist.length; i++) {
								this.imageArr.push(this.$imageUrl + this.batchDatalist[i].picUrl)
							}
							// uni.hideLoading()
						} else {
							this.loadshow = false
						}
					})
					.catch(err => {
						this.loadshow = false
						// uni.hideLoading()
					});
			},
		}
	}
</script>

<style>
	.headimage {
		width: 100vw;
		height: 538rpx;
		background-color: #FFFFFF;
	}

	.contentview {
		display: flex;
		background-color: #FFFFFF;
		margin: 16rpx 32rpx;
		border-radius: 25rpx;
		overflow: hidden;
		/* min-height: 246rpx; */
		width: calc(100% - 96rpx);
		padding: 0 32rpx 32rpx 0;
	}

	.zhuanheaderimage {
		margin: 32rpx 0 32rpx 32rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: orange;
	}

	.zhuannametitle {
		margin-top: 32rpx;
		margin-left: 24rpx;
		width: 550rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.tag-bgview {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		flex-wrap: wrap;
		margin-left: 0;
		margin-right: 24rpx;
		/* margin-top: 16rpx; */
	}

	.tag-view {
		height: 38rpx;
		border-radius: 19rpx;
		margin-right: 10rpx;
		/* background-color: transparent; */
		margin-top: 20rpx;
		padding: 0 12rpx;
	}

	.text-tag {
		font-size: 18rpx;
		font-weight: bold;
	}

	.zhuanjobitle {
		margin-top: 12rpx;
		font-size: 24rpx;
		margin-right: 24rpx;

	}

	.zhuanintroduceitle {
		margin-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* -webkit-line-clamp: 3; */
		-webkit-box-orient: vertical;
	}

	.hide {
		display: -webkit-box;
	}

	.show {
		display: block;
	}

	.view-bottom {
		margin: 24rpx 0 14rpx;
		display: flex;
		flex-direction: row;
	}

	.view-line-v {
		width: 2rpx;
		height: 36rpx;
		background-color: #999999;
	}

	.dataDown {
		margin: 10rpx;
	}

	.smallLable {
		display: flex;
		flex-direction: row如;
		justify-content: center;
		align-items: center;
	}

	.text-bottom {
		font-size: 26rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
	}

	.text-bottom.num {
		color: #333333;
	}

	.text-bottom.title {
		color: #999999;
	}

	.nowcallbutton {
		background: #FF3B0A;
		border-radius: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: white;
	}

	.nowcalled {
		background-image: linear-gradient(#938a94, #938a94);
	}
</style>